<template>
  <el-row style="height:100%">
    <page>
      <div class="page-content report-con">
        <div class="heatmap">
          <div class="head">
            <h2>热力图配置<span>{{headtext}}</span><el-button type="info" class="back" @click="back"  icon="el-icon-back">返回</el-button></h2>
            <div class="conf" >
              <p>
                <span>顶峰值：</span>
                <el-switch
                  active-text="开"
                  inactive-text="关"
                  v-model="isTop"
                >
                </el-switch>
                <el-input-number @focus="isfocus=true" @blur="isfocus=false" class="max" type="Number" :min="0" size="small" :disabled="!isTop" v-model="top_val"></el-input-number>
              </p>
              <p><span>辐射范围：</span><el-slider show-input v-model="radius" @focus="isfocus=true" :min="10"  @blur="isfocus=false" ></el-slider ></p>
              <el-button type="info" size="small" @click="restoreHead()" >还原显示配置</el-button>
              <el-button type="primary" size="small" @click="saveHead()" >保存显示配置</el-button>
            </div>
          </div>
          <div class="heatblock clear">
            <div class="leftlist">
              <div class="arealist">
                <h3>选择区域</h3>
                <el-input
                      @focus="isfocus=true"
                      @blur="isfocus=false"
                      placeholder="请输入需要查找的区域"
                      class="area-search"
                      prefix-icon="el-icon-search"
                      v-model="areaSearch">
                </el-input>
                <div class="area-group">
                  <el-radio-group v-model="areaCheck"   value-key="name">
                      <el-radio v-for="(item,index) in searchArea" :key="index" @change="areaChange" :title="item.name" :class="getExist(item)" :label="item" border size="medium">{{item.name}}<span class="dian" :class="item.id"></span></el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="mounlist">
                <h3>已在其它图上标记区域</h3>
                <el-input
                      @focus="isfocus=true"
                      @blur="isfocus=false"
                      placeholder="请输入需要查找的区域"
                      class="area-search"
                      prefix-icon="el-icon-search"
                      v-model="mountedSearch">
                </el-input>
              <div class="tag-group ">
                  <p v-if="!mountedList.length">暂无</p>
                  <el-tag
                    v-for="item in searchMounted"
                    :key="item.id"
                    type="info"
                    effect="plain">
                    {{ item.name }}
                    <span style="float: right;">{{item.floorName}}</span>
                  </el-tag>
                </div>
              </div>
            </div>  
            <div class="echardiv">
              <div class="confDiv">
                <el-row>
                  <h3>当前选择区域：{{areaCheck?areaCheck.name:'暂无'}}</h3>
                  <div class="conf-button">
                   
                    <el-button type="danger" :disabled="(isShow || (!areaCheck))" @click="deleteAllarea">删除所选区域点位</el-button> 
                    <el-button type="warning" :disabled="(isShow || (!areaCheck))" title="只清空已标记的点，不会删除数据" @click="deleteAllspot(true)">清空所选区域点位</el-button>
                    <el-button :type="isShow?'warning':'primary'" :disabled="!areaCheck" @click="pwv">{{isShow?'关闭预览':'预览全图'}}</el-button>
                    <el-button type="success" :disabled="(isShow|| (!areaCheck) )" @click="saveArea()" >保存配置</el-button>
                  </div>
                </el-row>
                <p class="shor-cre">
                  快速生成点：<span>数量：</span><el-input-number  @focus="isfocus=true" @blur="isfocus=false" v-model="create.c" size="mini" :min="2" :max="10"></el-input-number>
                    <span>半径/间距：</span><el-input-number @focus="isfocus=true" @blur="isfocus=false" v-model="create.r" size="mini" :step="10" :min="10" :max="100"></el-input-number>
                    <span style="margin-right:10px"></span>
                    <el-button type="primary" icon="el-icon-minus"  :disabled="(isShow|| (!areaCheck) || spotIndex<0 ||(!create.c) || !create.r)" size="mini" @click="shorCreate('a')">生成横线</el-button>
                    <el-button type="primary" icon="el-icon-minus" :disabled="(isShow|| (!areaCheck)||spotIndex<0 || !create.c || !create.r )" size="mini"  @click="shorCreate('b')" class="shubut">生成竖线</el-button>
                    <el-button type="primary" icon="el-icon-help" :disabled="(isShow|| (!areaCheck)||spotIndex<0  || !create.c|| !create.r )" size="mini" @click="shorCreate('c')" >生成圆形</el-button>
                  </p>
                <div class="xinxi">
                    <p v-if="spotIndex<0">未选择点</p>
                    <template v-for="(item,index) in spotlist" >
                      <p  :key="index" v-if="spotIndex==index">
                        所选点位：<span>x：</span><el-input-number @focus="isfocus=true" @blur="isfocus=false" :disabled="isShow" v-model="item.x" size="mini" :min="0" :max="map.w"></el-input-number>
                        <span>y：</span><el-input-number @focus="isfocus=true" @blur="isfocus=false" :disabled="isShow" v-model="item.y" size="mini" :min="0" :max="map.h"></el-input-number>
                        权重值：<el-input-number @focus="isfocus=true" @blur="isfocus=false" :disabled="isShow" v-model="item.value" size="mini" :precision="2" :step="0.05" :min="0.01" :max="1"></el-input-number>
                      </p>
                    </template>
                </div>
                
              </div>
              <div class="repData" id="hmapid"  @contextmenu.prevent="areaCheck&&!isShow?hmapRightClick($event):''" >
                <img :src="heatData.img" alt="hetmap"> 
                <div v-spotDrag="{set:set,index:index,map:map,xx:item.x,yy:item.y}" class="point" v-for="(item,index) in spotlist" v-show="!isShow" @contextmenu.prevent.stop=""   @click.stop="soptClick(index)" :key="index"  :class="(spotIndex==index?item.areaId+' on':item.areaId)+(item.areaId==areaCheck.id?' liang':'')" :style="'top:'+item.y+'px;left:'+item.x+'px;' ">
                  <!-- <p>
                    <span>区域：{{item.areaName}}</span>
                    <span>权重值：{{item.value}}</span>                    
                  </p> -->
                </div>
              </div>
            </div>      
          </div>

        </div>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .page-content {
    &.report-con {
      padding: 0 0;
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .hei13 {
      height: 15px;
      width: 100%;
    }
  }
  
  .heatmap {
    width: 100%;
    background: #fff;
    padding: 20px 10px 20px 20px;
    overflow: hidden;
    .head{
      line-height: 40px;
      > h2 {
        line-height: 40px;
        display: inline-block;
        font-weight: 600;
        font-size: 24px;
        letter-spacing: 1px;
        display: inline-block;
            width: 100%;
        span{
          font-size: 18px;
          margin-left: 20px;
          color: #5b7ee8;
        }
        .back{
          float:right;
          margin: 0 30px 0 0;
          span{
            color:#fff;
            margin-left: 6px;
            font-size: 14px;
          }
        }
      }
      .conf{
        margin-top: 10px;
        position: relative;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        .el-button{
             position: relative;
             top: -2px;
        }
        p{
          display: inline-block;
          width: 30%;
          line-height: 40px;
          position: relative;
          &:first-child{
            width: 20%; 
          }
          >span{
            line-height: 40px;
            display: inline-block;
          }
          .el-switch{
            margin-right: 10px;
          }
          .el-input.max{
            width:100px;
            
            .el-input__inner{
              height: 35px;          
            }
          }
          .el-slider{
            width: 80%;
            display: inline-block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
     
    }
    .heatblock{
      margin-top: 20px;
      .leftlist{
         float: left;
         width: 310px;
        .arealist{
          padding: 10px 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
          >h3{
            text-align: center;
            margin-bottom: 10px;
          }
          .area-search{
            margin-bottom: 15px;
          }
          .area-group{
              padding: 10px 15px 0;
              border: 1px solid #ccc;
              border-radius: 6px;
              height: 240px;
              overflow: hidden;
              width: 100%;
              overflow-y: auto;
              &::-webkit-scrollbar {
                width: 10px;
                height: 10px;
                //scrollbar-arrow-color: red;
              }

              /*定义滚动条轨道 内阴影+圆角*/
              &::-webkit-scrollbar-track {
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: rgba(0, 0, 0, 0.1);
                border-radius: 5px;
              }

              /*定义滑块 内阴影+圆角*/
              &::-webkit-scrollbar-thumb {
                border-radius: 5px;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: rgba(0, 0, 0, 0.2);
                //scrollbar-arrow-color: red;
              }
              .el-radio-group{
                position: relative;
                width: 100%;
                .el-radio{
                  width: 100%;
                  margin: 0 0 10px 0;
                  position: relative;
                  .el-radio__label{
                        display: inline-block;
                        max-width: 90%;
                        overflow-x: hidden;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                  }
                  .el-radio__input{
                    vertical-align: inherit;
                  }
                  &.is-checked.is-bordered{
                    background: rgba(110, 228, 106, 0.5);
                      .dian{
                        background: red;
                        opacity: 1;
                      }
                  }
                  &.on{
                    background: rgba(189, 189, 189, 0.5);
                    &::after{
                      content: '√';
                      float: right;
                      margin-right: 10px;
                      color:#ff2727;
                    }
                  }
                  .dian{
                    width: 10px;
                    height: 10px;
                    border-radius: 5px;
                    display: block;
                    position: absolute;
                    background:blue;
                    opacity: 0.3;
                    right: 10px;
                    top:50%;
                    margin-top: -5px;
                  } 
              }
            }
          }
         
        }
        .mounlist
        {
          padding: 10px 10px;
          margin-top: 20px;
          border: 1px solid #ccc;
          border-radius: 5px;
          >h3{
            text-align: center;
            margin-bottom: 10px;
          }
          .area-search{
            margin-bottom: 15px;
          }
          .tag-group{
            p{
              text-align: center;
              margin-bottom: 10px;
            }
            padding: 10px 15px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            max-height: 240px;
            overflow: hidden;
            width: 100%;
            overflow-y: auto;
            &::-webkit-scrollbar {
              width: 10px;
              height: 10px;
              //scrollbar-arrow-color: red;
            }

            /*定义滚动条轨道 内阴影+圆角*/
            &::-webkit-scrollbar-track {
              box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: rgba(0, 0, 0, 0.1);
              border-radius: 5px;
            }

            /*定义滑块 内阴影+圆角*/
            &::-webkit-scrollbar-thumb {
              border-radius: 5px;
              box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
              background: rgba(0, 0, 0, 0.2);
              //scrollbar-arrow-color: red;
            }
            .el-tag{
              margin-bottom: 6px;
              width:100%;
            }
          }
        }
        
        
      }
     
      .echardiv {
        width: 1006px;
        float: left;
        margin-left: 30px;
        .confDiv{
          text-align: right;
          h3{
            float: left;
            line-height: 40px;
          }
          .el-row{
             margin-bottom: 15px;
             .conf-button{
               float: right;
             }
          }          
          .xinxi{
            height:40px;
            p{
              text-align:left;
              height:40px;
              line-height:40px;
              font-size:14px;
              .el-input-number{
                width:140px;
              }
            }
          }
          .shor-cre{
            height: 40px;
            line-height: 40px;
            text-align: left;
            font-size: 14px;
            .shubut{
              .el-icon-minus{
                transform: rotate(90deg);
              }
            }
          }
          
        }     
        .repData {
          border: 3px solid #000;
          -moz-user-select:none; /* Firefox私有属性 */
          -webkit-user-select:none; /* WebKit内核私有属性 */
          -ms-user-select:none; /* IE私有属性(IE10及以后) */
          -khtml-user-select:none; /* KHTML内核私有属性 */
          -o-user-select:none; /* Opera私有属性 */
          user-select:none; /* CSS3属性 */
          width: 1006px;
          cursor: crosshair;
          height: 569px;
          position: relative;
          .point{
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            display: block;
            opacity: 0.3;
            cursor:pointer;
            background: blue;
            &.liang{
              opacity: 1;
              background: red;
            }
            p{
              position: absolute;
              left: 90%;
              top: 50%;
              display: none;
              width: 200px;
              background: rgba(0,0,0,0.8);
              padding:10px 0 10px  20px;
              border-radius: 6px;
              color:#fff;
              .el-button{
                padding: 2px 30px;
                margin-top: 10px;
                display: block;
              }
              span{
                display: block;
                line-height: 24px;
              }
            }
            &::after,&::before{
                content:'';
                position:absolute;
                z-index:-100;
                display: block;
                opacity: 0;
                left: -1px;
                top: -1px;
                width:100%;
                height:100%;
                border-radius:50%;
                border:0px solid rgba(238, 45, 66, 0.8);
                animation: sonar 2s infinite 1s;
                 &::after{
                   animation: sonar 2s infinite 2s;
                 }
            }
            &.on{
              opacity: 1;
               &::after,&::before{
                  opacity: 1;
                  z-index:0;
                  border-width: 1px;
                }
            }
              &:hover{
                opacity: 1;
                &::after,&::before{
                  opacity: 1;
                  z-index:0;
                  border:1px solid rgba(102,137, 241, 1);
                }              
                p{
                  display: block;
                  z-index: 2000;
                }
              }
          }
          img {
            width: 100%;
            height: 100%;
            display: block;
            margin:  auto;
          }
        }
        
      }
    }
    
  }
  @keyframes sonar{
    0%{transform:scale(1);opacity:0;}
    50%{transform:scale(1.5);opacity:1}
    100%{transform:scale(2);opacity:0;}
  }
</style>
<script>
  import Heatmap from "heatmap.js";     //热力图js
  let moment = require("moment");
  import page from "@/components/page/page";
  import Vue from "vue";
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  export default {
    data() {
      return {
        headtext:'',          //热力图所属企业-案场-楼层
        areaSearch:'',                //区域搜索
        mountedSearch:'',               //
        isfocus:false,                //输入框是否获得焦
        isShow:false,                 //预览
        heatmap:null,                 //热力图
        heatData:'',          //头部数据
        spotlist:[                    //已标点的数组
          // {
          //   areaId:'area1',
          //   areaName:'区域1',
          //   x:300,
          //   y:100,
          //   value:1,
          // },
        ],    
        mountedList:[                 //已安装的区域列表

        ],
        areaList:[                      //区域列表
        
        ],    
        areaCheck:{                     //当前选中区域
            
        },
        color:[
          '#FF0334',
          '#10CC0C',
          '#F5B74D',
          '#0F4BFA',
          '#ED50F8',
        ],
        zIndex:1,              //点权重值
        x:'',              //当前的x
        y:'',              //当前的y
        top_val:0,           //顶峰值
        isTop:false,       //是否开启顶峰值
        radius:35,       //辐射范围
        spotIndex:-1,        //是否是修改点 -1为添加点
        create:{
          c:10,       //生成点的数量count   
          r:10,        //生成点的半径 radius   生成圆形时r为半径  直线时r为点之间的间距
        },
        map:{               //div 图片的高宽
          w:'',
          h:'',
        },
        isChange:false,
      }
    },
    inject: ["reload"],
    computed:{
      //区域搜索
      searchArea: function () {
        var search = this.areaSearch.toLowerCase();
        if (search) {
         return this.areaList.filter(function (name) {
          return Object.keys(name).some(function (key) {
           return String(name[key]).toLowerCase().indexOf(search) > -1
          })
         })
        }
        return this.areaList;
      },
      //已在其它图上标点的区域搜索
      searchMounted: function () {
        var search = this.mountedSearch.toLowerCase();
        if (search) {
         return this.mountedList.filter(function (name) {
          return Object.keys(name).some(function (key) {
           return String(name[key]).toLowerCase().indexOf(search) > -1
          })
         })
        }
        return this.mountedList;
      }
    },
    components: {
      page,
    },
    created() {
      
    },
    mounted(){  
      this.$Bus.$emit('Loading',true);
      $('body').bind('keydown',(e)=>{
        e=event||arguments[0];
        if(this.isfocus)
          return ;
        if(e.keyCode==8||e.keyCode==46)
        {
          if(this.spotIndex>=0){
            this.spotDelete(this.spotIndex);
          }
        }
      });
      this.map.w=$('#hmapid').width()-10;
      this.map.h=$('#hmapid').height()-10;
      this.headtext=this.$route.query.headtext;
      this.getHead(this.$route.query.id);
    
    },
    beforeDestroy(){
      $('body').unbind('keydown');
    },
    directives:{
      spotDrag(el,bindings){
        el.onmousedown =(e)=>{
          let index = bindings.value.index;
          let olx=bindings.value.xx;
          let oly=bindings.value.yy;
          let map = bindings.value.map
          var osmall={};
              osmall.startX = e.clientX - el.offsetLeft;
				      osmall.startY = e.clientY - el.offsetTop;
           document.getElementById('hmapid').onmousemove=(e)=>{
            el.style.left=e.clientX - osmall.startX + "px";
            el.style.top = e.clientY - osmall.startY + "px";
            if (e.clientX - osmall.startX <= 0) {
  						el.style.left = 0 + "px";
  					}
  					if (e.clientY - osmall.startY <= 0) {
  						el.style.top = 0 + "px";
  					}
  					if (e.clientX - osmall.startX >= map.w) {
  						el.style.left = map.w + "px";
  					}
  					if (e.clientY - osmall.startY >= map.h) {
  						el.style.top = map.h + "px";
  					}
          }
          document.getElementById('hmapid').onmouseup = function(){
            bindings.value.set(el.style.left, el.style.top,index,olx,oly)
             document.getElementById('hmapid').onmousemove = document.getElementById('hmapid').onmouseup = null;
          }

        }
      }
    },
    watch: {
      areaCheck: {
        //深度监听，可监听到对象、数组的变化
          handler(newV, oldV) {
            if(this.isChange){
              this.$confirm("当前区域下标点已改变，是否保存？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",  
                center: true
              })
              .then(()=>{
                  this.saveArea(true,oldV);
              })
              .catch(()=>{
                  this.$Bus.$emit('Loading',true);
                  this.isChange=false;
                  this.begin();
              })
            }
        },
        deep: true
      },
     
    },
    methods:{
      //拖动改变x,y坐标值
      set(x,y,index,olx,oly){
        this.$set(this.spotlist[index],'x',parseInt(x));
        this.$set(this.spotlist[index],'y',parseInt(y));
        if(parseInt(x)!=parseInt(olx) || parseInt(y)!=parseInt(oly))
        {
          this.isChange=true;
        }
      },
      //通过热力图id获得数据
      getHead(id,isbegin=true){
        let url='/sys/thermal/map/get?id='+id;
        this.$api.get(url)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data) {
            let _data=data.data;
            let obj={
              case_info_id:_data.case_info_id,
              company_id:_data.company_id,
              floor_tag_id:_data.floor_tag_id,
              id:_data.id,
              indic:_data.indicator,
              img:_data.thermal_map,
            }
            this.heatData=obj;
            this.top_val=_data.top_peak>-1?_data.top_peak:0;
            this.isTop=_data.top_peak>-1?true:false;
            this.radius=_data.radiation_radius==null?35:_data.radiation_radius;
            if(isbegin) {
              this.begin();
            }
            else{
               this.$Bus.$emit('Loading',false);
            }
          }
        })
        .catch(err=>{
           console.log(err);
           this.$Bus.$emit('Loading',false);
        })
      },
      //初始数据
      begin(){
        let url='sys/thermal/map/find-area-by-thermal-map-id?thermalMapId='+this.heatData.id;
        this.$api.get(url)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data){
            let _data=data.data;
            if(_data){
                let arr=[];           //区域列表
                let mountedarr=[];    //已在其它地图上标点的区域
                let spotStrArr=[]        //点位数组字符串数组 需转成对象
                let mode={};
                for(let i in _data.unmountedList){
                  mode={
                    id:_data.unmountedList[i].id,
                    name:_data.unmountedList[i].area_name,
                    dianId:_data.unmountedList[i].thermalMapCoordinatesId,  
                  }
                  arr.push(mode);
                  if(_data.unmountedList[i].coordinate)
                  {
                    spotStrArr.push(_data.unmountedList[i].coordinate)
                  }
                }
                let objlist='';
                let dianList=[];
                for(let i in spotStrArr)
                {
                  objlist=JSON.parse(spotStrArr[i]);
                  dianList=[...dianList,...objlist];
                }
                this.spotlist=dianList;
                for(let i in _data.mountedList){
                  mode={
                    id:_data.mountedList[i].id,
                    name:_data.mountedList[i].area_name,
                    floorName:_data.mountedList[i].floor_tag_name
                  }
                  mountedarr.push(mode);
                }
                this.areaList=arr;              //未安装的(当前准备标点的区域列表)
                this.mountedList=mountedarr;  //已安装的区域列表
                if(Object.keys(this.areaCheck)==0)
                {
                  this.areaCheck=arr[0];
                }
                else{
                  let aa=arr.filter(x=>{
                    return x.id==this.areaCheck.id
                  })
                  if(aa.length>0)
                  {
                    this.areaCheck=aa[0];
                  }
                  this.spotIndex=-1;
                }
                this.$Bus.$emit('Loading',false);
            }
            else{
              this.areaList=[];
              this.areaCheck={};
              this.$Bus.$emit('Loading',false);
            }
          }
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading',false);
        })
        
      },
      //热力图右键  标点
      hmapRightClick(e){
        this.x = e.offsetX-5;
        this.y = e.offsetY-5;
        let min=2;
        for(let i in this.spotlist)
        {
           if(this.spotlist[i].areaId==this.areaCheck.id)
           {
             min=this.spotlist[i].value<min?this.spotlist[i].value:min;
           }
        }
        this.zIndex=min<=0.05?0.05:(min>1?1:min-0.05);
        let data={              //拿到所有当前点击点的信息（所选区域,x,y,权重）
            areaId:this.areaCheck.id,
            areaName:this.areaCheck.name,
            value:this.zIndex,
            x:this.x,
            y:this.y,          
        }
        this.spotlist.push(data);
        this.spotIndex=this.spotlist.length-1;
        this.isChange=true;
        // this.$nextTick(()=>{
        //   this.Upclolr();
        // })
       
      },
      //快速生成
      shorCreate(type){
        let arr=[];
        let mode=this.spotlist[this.spotIndex];
        let count=this.create.c;
        let gap=this.create.r;
        let ls={};
        let v=mode.value;
        switch(type)    //type:a横线 b直线 c圆
        {
          case 'a':{
            for(let i=1;i<=Math.ceil(count/2);i++)
            {
              v=parseFloat((v<=0.1?0.1:v-0.1).toFixed(2));
              ls={
                 areaId:mode.areaId,
                 areaName:mode.areaName,
                 value:v,
                 x:mode.x+(i*gap),
                 y:mode.y,
              }
              if(!(ls.x<0||ls.x>this.map.w))
              {
                arr.push(ls);
              }
              if(i>count/2)
              {
                continue;
              }
              ls={
                 areaId:mode.areaId,
                 areaName:mode.areaName,
                 value:v,
                 x:mode.x-(i*gap),
                 y:mode.y,  
              }
              if(!(ls.x<0||ls.x>this.map.w))
              {
                arr.push(ls);
              }
            }
            break;
          }
          case 'b':{          
            for(let i=1;i<=Math.ceil(count/2);i++)    
            {
              v=parseFloat((v<=0.1?0.1:v-0.1).toFixed(2));      
              ls={
                 areaId:mode.areaId,
                 areaName:mode.areaName,
                 value:v,
                 x:mode.x,
                 y:mode.y+(i*gap),
              }
              if(!(ls.y<0||ls.y>this.map.h))
              {
                arr.push(ls);
              }
              if(i>count/2)
              {
                continue;
              }
              ls={
                 areaId:mode.areaId,
                 areaName:mode.areaName,
                 value:v,
                 x:mode.x,
                 y:mode.y-(i*gap),
              }
              if(!(ls.y<0||ls.y>this.map.h))
              {
                arr.push(ls);
              }
            }
            break;
          }
          case 'c':{
            let v1=v,v2=v;            
            gap*=3;                   //gap 半径 一般30
            for(let i=1;i<=count;i++)        //count 生成点的个数
            {
              let hudu=(2*Math.PI / 360) * (360/count) * i;
              let X = mode.x + Math.sin(hudu) * gap;
              var Y = mode.y - Math.cos(hudu) * gap ;
              if(i<count/2)
              {
                v1=parseFloat((v1<=0.1?0.1:v1-0.1).toFixed(2));        
              }
              else{
                v2=parseFloat((v2<=0.1?0.1:v2-0.1).toFixed(2)); 
              }
              ls={
                 areaId:mode.areaId,
                 areaName:mode.areaName,
                 value:i<count/2?v1:v2,
                 x:Math.ceil(X),
                 y:Math.ceil(Y),
              }
              if(!(ls.y<0||ls.y>this.map.h) &&!(ls.x<0||ls.x>this.map.w))
              {
                arr.push(ls);
              }
            }
            break;
          }
        }
        this.spotlist=[...this.spotlist,...arr];
        this.isChange=true;
        // this.$nextTick(()=>{
        //   this.Upclolr();
        // })
      },
      //标点颜色
      // Upclolr(){
      //   for(let i in this.areaList)
      //   {
      //      $('.'+this.areaList[i].id).css('background',this.color[i]);
      //   }
      // },
      //点 单击 选定一个点(左键)
      soptClick(index){
        this.spotIndex=index;
        for(let i in this.areaList)
        {
          if(this.areaList[i].id==this.spotlist[index].areaId)
          {
            
            this.areaCheck=this.areaList[i];
            break;
          }
        }
        let top=$('.'+this.areaCheck.id).parents('.el-radio').position().top;
        $('.area-group').scrollTop(top-92);
      },
      //删除一个点
      spotDelete(index){
        this.spotIndex=-1;
        this.spotlist.splice(index, 1);
        this.isChange=true;
        // this.$nextTick(()=>{
        //   this.Upclolr();
        // })
      }, 
      //得到已标点的areaClass
      getExist(data){
        let arr=this.spotlist.filter(x=>{
          return x.areaId==data.id
        })
        return arr.length>0?'on':'';
      },
      //区域单选改变
      areaChange(val){
      },
      //清空选中区域所有点 
      deleteAllspot(isC){
        let id= this.areaCheck.id;
        this.spotlist= this.spotlist.filter(item=>{
          return item.areaId!=id
        });
        this.spotIndex=-1;
        this.isChange=isC;
      },
      //删除选中区域所有点 物理删除
      deleteAllarea(obj,isCdel=false){
        let areaV=isCdel?obj:this.areaCheck;
        if(!areaV.dianId)
        {
          this.isChange=false;
          this.$message({
              message: "删除成功",
              type: "success"
          });
          if(isCdel)
          {
            return;
          }
          else{
            this.deleteAllspot(false);
          }
          return 
        }
        if(isCdel)
        {
          this.del(areaV.dianId);
        }
        else{
          this.$confirm("确定删除？如删除该区域下所有点位数据将被删除，无法恢复！", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
          })
          .then(()=>{
            this.del(areaV.dianId)
          })
          .catch(()=>{});
        }
       
      },
      //删除接口
      del(id){
        this.$Bus.$emit('Loading',true);
          let url='sys/thermal/map/delete-tm-coordinates?tmcId='+id;
          this.$api.delete(url)
          .then(data=>{
            if(data == '10001'){
              this.$message.error('无权操作该数据')
              this.$Bus.$emit('Loading',false);
              return
            }
            if(data.msg=='success')
            {
               this.$message({
                message: "删除成功",
                type: "success"
              });
              this.isChange=false;
              this.begin();
            }
            else{
              this.$message({
                message: "删除失败",
                type: "warning"
              });
              this.$Bus.$emit('Loading',false);
            }
          })
          .catch(err=>{
             console.log(err);
            this.$Bus.$emit('Loading',false);
          })
      },
      //保存一个区域的配置
      saveArea(isCsave=false,obj){
        let areaV=isCsave?obj:this.areaCheck;
        let arr=this.spotlist.filter(x=>{
          return x.areaId==areaV.id
        });
        if(!arr.length){
          if(areaV.dianId)
          {
            this.$confirm(areaV.name+"区域下有没有标点，是否删除物理删除(无法恢复)该区域所有点位？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              center: true
            })
            .then(()=>{              
                this.deleteAllarea(areaV,isCsave);
            })  
            .catch(()=>{return});
          }
          else{
            this.$message({
              message: areaV.name+"区域并未标点,请标点",
              type: "warning"
            });            
          }
          return
        }
        else{
          this.$Bus.$emit('Loading',true);
          let arrStr=JSON.stringify(arr);
          let dataV={
            area_id:areaV.id,
            coordinate:arrStr,
            thermal_map_id:this.heatData.id
          }
          if(areaV.dianId)
          {
            dataV.id=areaV.dianId;
          }
          let url='sys/thermal/map/save-tm-coordinates';
          this.$api.post(url,dataV)
          .then(data=>{
            if(data == '10001'){
              this.$message.error('无权操作该数据')
              this.$Bus.$emit('Loading',false);
              return
            }
            if(data.msg=='success')
            {
              this.$message({
                  message: areaV.name+"区域点位保存成功",
                  type: "success"
              });
              this.isChange=false;
            }
            else{
              this.$message({
                  message: areaV.name+"保存失败",
                  type: "error"
              });
            }
           this.begin();
          })
          .catch(err=>{
              this.$message({
                  message: this.areaCheck.name+"保存失败",
                  type: "error"
              }); 
              this.$Bus.$emit('Loading',false);
          });
        }
       
      },
     
      //预览
      pwv(){
        this.isShow=!this.isShow;
        if(!this.isShow)
        {
          $('.heatmap-canvas').remove();
          return;
        }
        this.heatmap = Heatmap.create({
          container: document.getElementById("hmapid"),
          radius: this.radius,
          maxOpacity: 0.6,
          minOpacity: 0,
          blur: 0.75,
          // gradient: {
          //   // enter n keys between 0 and 1 here
          //   // for gradient color customization
          //   '.1': 'blue',
          //   '.2': 'pink',
          //   '.3': 'blue',
          //   '.4': 'pink',
          //   '.5': 'blue',
          //   '.6': 'pink',
          //   '.7': 'blue',
          //   '.8': 'pink',
          //   '.9': 'blue',
          //   '.95': 'pink',
            
          // },
        });
        let spotOption=[];
        let mode={};
        for(let i in this.spotlist)
        {
          mode={
            x:parseInt(this.spotlist[i].x)+5,
            y:parseInt(this.spotlist[i].y)+5,
            value:this.spotlist[i].value*20
          }
          spotOption.push(mode);
        }
        let data={
          max:10,
          data:spotOption
        }
        this.heatmap.setData(data);
      },
      //保存显示配置
      saveHead(){
        this.$Bus.$emit('Loading',true);
        let data=this.heatData;
        let parmas={
          case_info_id:data.case_info_id,
          company_id:data.company_id,
          floor_tag_id:data.floor_tag_id,
          id:data.id,
          indicator:data.indic,
          thermal_map:data.img,
        }
        parmas.radiation_radius=this.radius;
        parmas.top_peak=this.isTop?this.top_val:-1;
        let url='/sys/thermal/map/save';
        this.$api.post(url,parmas)
        .then(data=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data="success") {
            this.$message({
                message: "热力配置保存成功",
                type: "success"
            });
          } else{
             this.$message({
                message: "热力配置保存失败",
                type: "error"
            });
          }
          this.$Bus.$emit('Loading',false);
        })
        .catch(err=>{
           console.log(err);
          this.$Bus.$emit('Loading',false);
        })
      },
      //还原显示配置
      restoreHead(){
        this.$Bus.$emit('Loading',true);
         this.getHead(this.$route.query.id,false);
      },
      //返回
      back(){
        this.$router.go(-1);
      },      
    }
  }
</script>
